<template>
    <view class="card">
        <view>共{{ list.length }}件商品</view>
        <view v-for="i in list">
            <view class="shopItem">
                <view class="shopImg">
                    <image :src="i.thum[0].path" mode="aspectFill" class="img"></image>
                    <view class="name">{{ i.name }}</view>
                </view>
                <view>x{{ i.shopNum }}</view>
                <view class="moneyBox">
                    <view class="fwb">￥{{ priceFrom(i.money * i.shopNum) }}</view>
                    <view class="unDelete">￥{{ priceFrom(i.deMoney * i.shopNum) }}</view>
                </view>
            </view>
        </view>
        <view class="count">
            <view>
                合计
                <text class="money">￥{{ money }}</text>
            </view>
            <view>
                <text class="unDelete">优惠￥{{ preMoney }}</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { computed } from 'vue';
import { useCounterStore } from '../../stores/shop/car';
import { priceFrom } from '../../utils/tools.js';
const props = defineProps({
    list: {
        type: Array,
        default: []
    },
    count: {}
});
const preMoney = computed(() => {
    return priceFrom(useCounterStore().freeCount);
});
const money = computed(() => {
    if (props.count) {
        return priceFrom(props.count);
    } else {
        return priceFrom(useCounterStore().total);
    }
});
console.log(props.count);
</script>

<style lang="scss" scoped>
.card {
    padding: 20rpx;
    margin: 20rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
    background-color: #fff;
}
.unDelete {
    font-size: $uni-font-size-sm;
    color: $uni-color-grey;
    text-decoration: line-through;
}
.shopItem {
    @include flex-box();
    align-items: center;
    margin-top: 20rpx;
    font-size: $uni-font-size-paragraph;

    .shopImg {
        display: flex;
        padding: 10rpx;

        .img {
            width: 60rpx;
            height: 60rpx;
            border-radius: 20rpx;
            margin-right: 20rpx;
        }
        .name {
            width: 220rpx;
            @include ellipsis(2);
        }
    }
    .moneyBox {
        width: 230rpx;
        @include ellipsis(2);
        text-align: right;
    }
}

.count {
    text-align: right;
    font-size: $uni-font-size-sm;
    color: $uni-color-grey;
    margin: 30rpx 0;

    .money {
        font-weight: bold;
        font-size: $uni-font-size-paragraph;
        color: #000;
    }
}
</style>
